<template>
  <div class="container">
    <header>
      <div class="left">
        <span @click="back">
          <i></i>
        </span>
        <h6>关于我们</h6>
        <span>
          <i></i>
        </span>
      </div>
    </header>

    <div class="logo">
      <img src="../assets/img/ic_logo.b351957.png" alt="">
    </div>

    <!-- 下面的 -->
    <div class="bottom">
      <div class="error all" @click="showShare = true">
        <div class="left">
          <h6>推荐给好友</h6>
        </div>
        
        <i></i>
      </div>
      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
      <div class="online all">
        <div class="left">
          <h6>官方网址</h6>
        </div>

        <div class="time">

          <h6>www.sparke.cn</h6>
          <i></i>
        </div>
      </div>
      <div class="chat all">
        <div class="left">
          <h6>用户服务协议</h6>
        </div>


        <i></i>

      </div>
      <div class="about all">
        <div class="left">
          <h6>隐私政策</h6>
        </div>

        <i></i>
      </div>
    </div>

    <footer>
      <h6>Copyright @ 2022 All Rights Reserved</h6>
      <h6>山东星火教育科技集团股份有限公司</h6>
    </footer>
  </div>
</template>
<script>
import router from '@/router'
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
  setup() {

    let back = () => {
      router.push({
        path: "/my"
      })
    }

    const showShare = ref(false);
    const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };



    return {
      back,
      options,
      onSelect,
      showShare,

    }
  },
}
</script>
<style lang="scss" scoped>
@import "../assets/css/base.css";

header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  background-color: #fff;
  z-index: 100;
  border-bottom: 1px solid #f1f1f1;
}

header .left {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;

  h6 {
    // margin-left: 50px;
    font-size: 15px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}

header .left span:nth-child(1) i {
  display: block;
  background-image: url(../assets/img/下载.png);
  width: 48px;
  height: 46px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 20px 13px;
}

header .left span:nth-child(3) i {
  display: block;
  // background-image: url(../assets/img/下载.png);
  width: 48px;
  height: 46px;
  // background-size: 18px 18px;
  // background-repeat: no-repeat;
  // background-position: 20px 13px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 134px;
  padding-bottom: 43px;
  border-bottom: 1px solid #f1f1f1;

  img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px 0px #c0c0c0;
  }
}

.bottom {
  background-color: #ffff;
  display: flex;
  flex-direction: column;
  // margin-top: 18px;

  .all {
    display: flex;
    margin: 0px 15px;
    height: 57px;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;

    >.time {
      display: flex;

      h6 {
        color: #c8c8c8;
      }
    }

    .left {
      display: flex;
      flex: 1;

      img {
        width: 20px;
        margin-right: 17px;
      }

      h6 {
        color: #242424;
        font-weight: bold;
      }
    }

    i {
      background-image: url(../assets/img/icon_word_right.png);
      background-size: 18px 18px;
      width: 18px;
      height: 18px;
      display: block;
    }
  }
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 130px;

  h6 {
    color: #b4b4b4;
  }
}
</style>